﻿@page "/chart/waterfall"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample visualizes the revenue and profits of a company by using default waterfall series in the chart. The tooltip provides details on the profits made to the business by each department.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure the waterfall type chart. The waterfall type chart explains the gradual change in the quantitative value of an entity that is subject to changes by increments or decrements.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the waterfall series can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/chart-types/waterfall'>documentation section</a>.</p>
</ActionDescription>

<style>

    #waterfall_Series_0_Connector_ {
        stroke-dasharray: 10px 10px;
        stroke-linejoin: round;
        stroke-linecap: round;
        -webkit-animation: dash 1s linear infinite;
        animation: dash 1s linear infinite;
    }

    @@-webkit-keyframes dash {
        100% {
            stroke-dashoffset: -20px;
        }
    }

    @@keyframes dash {
        100% {
            stroke-dashoffset: -20px;
        }
    }
</style>

<div class="control-section">
    <SfChart ID="waterfall" Title="Company Revenue and Profit" Theme="@Theme">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" PlotOffset="20">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis Minimum="0" Maximum="5000" Interval="1000" Title="Expenditure (in Billion)">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryYAxis>
        <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
        <ChartLegendSettings Visible="false"></ChartLegendSettings>
        <ChartSeriesCollection>
            <ChartSeries NegativeFillColor="#e56590" DataSource="@ChartPoints" Name="USA" XName="X" Width="2" IntermediateSumIndexes="@IntermediateSumIndexes"
                         SumIndexes="@SumIndexes" YName="Y" Type="ChartSeriesType.Waterfall">
                <ChartMarker>
                    <ChartDataLabel Visible="true">
                        <ChartDataLabelFont Color="#ffffff"></ChartDataLabelFont>
                    </ChartDataLabel>
                </ChartMarker>
            </ChartSeries>
        </ChartSeriesCollection>
        <ChartEvents OnAxisLabelRender="AxisLabelRender"></ChartEvents>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    private Double[] IntermediateSumIndexes { get; set; } = new Double[] { 4 };
    private Double[] SumIndexes { get; set; } = new Double[] { 7 };
    public List<WaterfallChartData> ChartPoints { get; set; } = new List<WaterfallChartData>
    {
        new WaterfallChartData { X = "Income", Y = 4711 },
        new WaterfallChartData { X = "Sales", Y = -1015 },
        new WaterfallChartData { X = "Development", Y = -688 },
        new WaterfallChartData { X = "Revenue", Y = 1030 },
        new WaterfallChartData { X = "Balance" },
        new WaterfallChartData { X = "Expense", Y = -361 },
        new WaterfallChartData { X = "Tax", Y = -695 },
        new WaterfallChartData { X = "Net Profit" }
    };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public void AxisLabelRender(AxisLabelRenderEventArgs args)
    {
        if (args.Axis.Name == "PrimaryYAxis")
        {
            args.Text = "$" + Convert.ToDouble(args.Text) / 1000 + "B";
        }
    }

    public class WaterfallChartData
    {
        public string X { get; set; }
        public double Y { get; set; }
    }
}


